<template>
  <div class="hello">
    <div class="logo"></div>
    <h1>{{ msg }}</h1>
    <ul>
      <mt-button type="primary" size="large" @click="go('testmintui')">UI组件展示</mt-button>
      <mt-button type="primary" size="large" @click="go('testajax')">ajax示例(vue-resource)</mt-button>
      <mt-button type="primary" size="large" @click="go('testi18n')">国际化</mt-button>
      <mt-button type="primary" size="large" @click="go('testechart')">报表异步加载</mt-button>
      <mt-button type="primary" size="large" @click="go('testmcloudapi')">私有云API</mt-button>
      <mt-button type="primary" size="large" @click="go('testses6')">ES6模块使用</mt-button>
      <mt-button type="primary" size="large" @click="go('testArray')">testArray</mt-button>
      <mt-button type="primary" size="large" @click="go('')">单点视频</mt-button>
      <mt-button type="primary" size="large" @click="go('')">web即时通讯</mt-button>
      <mt-button type="primary" size="large" @click="go('')">Service Worker API</mt-button>
      <mt-button type="primary" size="large" @click="go('')">Notifiction</mt-button>
      <!--<mt-button type="primary" size="large" @click="go('echartmap')">echart地图展示</mt-button>-->
      <<mt-button type="primary" size="large" @click="go('mapchartDeep')">echart地图展示</mt-button>
    </ul>


  </div>
</template>

<script>
  import Vue from 'vue';
  import {Button} from 'mint-ui';
  import {Indicator} from 'mint-ui';

  Vue.component(Button.name, Button);
  export default {
    name: 'HelloWorld',
    components: {},
    data() {
      return {
        msg: '立达信前端架构DEMO(v20180312)',
      }
    },
    methods: {
      go(url) {
        if (url === 'testechart') {
          //报表比较慢，暂时采用这种方式。
          Indicator.open({
            text: '正在准备报表',
            spinnerType: 'fading-circle'
          });
        }
        this.$router.push({
          name: url,
          params: {
            username: 'leedarson'
          }
        })
      }
    },
    filters: {},
    computed: {},
    props: [],
    watch: {},
    created() {
    },
    mounted() {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  .hello {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    .logo {
      width: 100vw;
      height: 20vh;
      background-image: url("../image/logo.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    h1 {
      font-size: 1.5rem;
      text-align: right;
    }

    ul {
      width: 100%;
      padding: 5vw;

      button {
        margin-top: 2vw;
      }

      & > button:nth-child(1) {
        margin-top: 0;
      }

    }
  }

</style>
